<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jest</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav><a href="index.html">首页</a> &rightarrow; Jest</nav>
    <h1>Jest</h1>

    <nav>
        <ul>
            <li><a href="#getting-started">一、起步</a></li>
            <li><a href="#babel">二、使用 Babel</a></li>
        </ul>
    </nav>
    <p>
        <a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">Jest</a> 是一个 JavaScript 测试框架。
    </p>

    <h2 id="getting-started">一、起步</h2>
    <p>安装本地依赖</p>
    <pre>npm install --save-dev jest
# 或
yarn add --dev jest</pre>

    <p>编写待测文件 <code>sum.js</code></p>
    <pre>function sum(a, b) {
    return a + b;
}
module.exports = sum;</pre>

    <p>编写单元测试文件 <code>sum.test.js</code></p>
    <pre>
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});</pre>

    <p>在 <code>package.json</code> 增加 npm 测试脚本</p>
    <pre>{
    "scripts": {
        "test": "jest"
    }
}</pre>

    <p>运行 <code>yarn test</code> 或 <code>npm test</code> 执行测试。</p>

    <h2 id="babel">二、使用 Babel</h2>
    <p>使用 Babel 前安装依赖：</p>
    <pre>npm install --save-dev babel-jest @babel/core @babel/preset-env</pre>
    <p>配置 Babel，目标设定为当前的 Node.js 版本。在根目录创建 <code>babel.config.js</code> 配置文件：</p>
    <pre>module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }]
    ],
}</pre>
    <blockquote>
        <a href="https://www.npmjs.com/package/babel-jest" target="_blank">babel-jest</a> 会跟随 Jest 自动安装。若项目中存在 babel 配置文件，<code>babel-jest</code> 会自动转换 js 文件。若要关闭这种行为，可以重置 <code>transform</code> 配置项：
        <pre>// jest.config.js
transform: {},
</pre>

        <p>如果有多个预处理器，需要将 <code>babel-jest</code> 明确设定为 <code>.js</code> 函数的预处理器。</p>
        <pre>// jest.config.js
"transform": {
    "\\.[jt]sx?$": "babel-jest"
}</pre>
    </blockquote>

    <h3 id="typescript">2.1 使用 TypeScript</h3>
    <p>如果想使用 TypeScript，可以在 Babel 配置基础上，安装如下依赖：</p>
    <pre>$ npm install --save-dev @babel/preset-typescript</pre>
    <p>而后，将其加入 <code>babel.config.js</code> 配置文件中：</p>
    <pre>// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-typescript',
    ]
}</pre>

    <h3 id="vue">2.2 使用 Vue</h3>
    <p>想用 Jest 测试 <code>.vue</code> 单文件组件，需要安装 <a href="https://github.com/vuejs/vue-jest" target="_blank" rel="noopener noreferrer">vue-jest</a> 转换器。<code>vue-jest</code> 的版本较多。对于 Vue3 和 Jest 28+，可以使用 <code>@vue/vue3-jest@28</code></p>
    <pre>$ npm install --save-dev @vue/vue3-jest@28</pre>
    <p>然后，配置 Jest 转换器：</p>
    <pre>// jest.config.js
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
    "\\.vue$": "@vue/vue3-jest"
}</pre>

    <p>如果使用 Jest 24.0.0+ 和 babel-jest，务必安装 <a href="https://github.com/babel/babel-bridge" target="_blank">babel-core@bridge</a></p>
    <pre>$ npm install --save-dev babel-core@bridge</pre>
    <blockquote><code>babel-core@bridge</code> 是一个占位包，用于 <code>babel-core</code> 到 <code>@babel/core</code> 的平滑过渡。</blockquote>

</body>
</html>